<!DOCTYPE html>
<html>
<head>
    <title>报名</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

    <link rel="stylesheet" href="/static/web/css/weui.min.css">
    <link rel="stylesheet" href="/static/web/css/jquery-weui.css">

</head>
<style>
    .top {
        width: 100%;
    }

    .top img {
        width: 100%;
    }

    .form_btn {
        background: #3074f0;
        width: 180px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        color: #fff;
        margin: 20px auto;
        border: unset;
    }

    .bottom {
        width: 100%;
    }

    .bottom img {
        width: 100%;
    }
</style>
<body ontouchstart>
<div class="top">
    <img src="/static/web/image/top.png?v=0.1" alt="">
</div>


<div class="weui-cells__title">个人信息</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" pattern="" placeholder="请输入姓名" id="name" autocomplete="off">
        </div>
    </div>
    <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
            <label class="weui-label">手机</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" placeholder="请输入手机号" id="mobile" autocomplete="off">
        </div>
    </div>

</div>
<div class="weui-cells__title">地址信息</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">区域</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" pattern="" placeholder="请选择" id="city" autocomplete="off">
        </div>
    </div>
    <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
            <label class="weui-label">地址</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入详情地址" id="address" autocomplete="off">
        </div>
    </div>

</div>
<div class="form_btn" onclick="btn_submit()">
    确认报名
</div>

<div class="bottom">
    <img src="/static/web/image/bottom.png?v=0.1" alt="">
</div>
<script src="/static/web/js/jquery-2.1.4.js"></script>
<script src="/static/web/js/fastclick.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>
<script src="/static/web/js/jquery-weui.js"></script>
<script src="/static/web/js/city-picker.js?v=1.0.1"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" charset="utf-8">
    wx.config({$config|raw});
    wx.checkJsApi({
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function (res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
    wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
            title: '吸之声送您价值988元深层清洁除螨体验', // 分享标题
            desc: '吸之声-家庭除螨专家', // 分享描述
            link: "{:url('index/index',[],false,true)}?user_openid={$openid}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "{:url('/static/web/image/logo.png',[],false,true)}", // 分享图标
            success: function () {
                // 设置成功
            }
        })
        wx.updateTimelineShareData({
            title: '吸之声送您价值988元深层清洁除螨体验', // 分享标题
            desc: '吸之声-家庭除螨专家', // 分享描述
            link: "{:url('index/index',[],false,true)}?user_openid={$openid}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "{:url('/static/web/image/logo.png',[],false,true)}", // 分享图标
            success: function () {
                // 设置成功
            }
        });

    });
    wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log(res)
    });
</script>
<script>
    $("#city").cityPicker({
        title: "请选择收货地址"
    });
    $("#showTooltips").click(function () {
        var tel = $('#tel').val();
        var code = $('#code').val();
        if (!tel || !/1[3|4|5|7|8]\d{9}/.test(tel)) $.toptip('请输入手机号');
        else if (!code || !/\d{6}/.test(code)) $.toptip('请输入六位手机验证码');
        else $.toptip('提交成功', 'success');
    });

    function btn_submit() {
        $.showLoading("正在加载...");
        $(this).attr('disabled', true)
        let that = $(this);
        let name = $("#name").val()
            , mobile = $('#mobile').val()
            , city = $("#city").val()
            , address = $("#address").val();
        if (!name) {
            $.toptip("请输入姓名");
            $.hideLoading()
            return false;
        }
        if (!mobile) {
            $.toptip("请输入正确的手机号");
            $.hideLoading()
            return false;
        }
        if (!city) {
            $.toptip("请选择区域")
            $.hideLoading()
            return false;
        }
        if (!address) {
            $.toptip("请输入详情地址")
            $.hideLoading()
            return false;
        }

        $.post("{:url('save')}", {
            name: name,
            mobile: mobile,
            city: city,
            address: address,
            fatherOpenid: "{$fatherOpenid}"
        }, function (res) {
            $.hideLoading();
            if (res.code == 1) {
                window.location.href = "{:url('index/success')}";
            } else {
                window.location.href = "{:url('index/error')}";
            }
            that.attr('disable', false)
        });

    }
</script>
</body>
</html>
